<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>

<script src="../jquery-1.6.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="../reset.css"/>
 <style type="text/css">
html,body{overflow-y: auto;}
     .close{position: absolute;right: 0;top:0;}
</style>
<body>
<span id="top"></span>
<div style="width:250px; height: 235px; background: #eeeeef"></div>
<span id="bottom"></span>
<a href="#abc">abc</a>
<select>
    <option>阿凡是的发生地方收到
    </option>
</select>
<script type="text/javascript">

    function logs() {
        var s = '';
        for (var i = 0,aLen = arguments.length; i < aLen; i++) {
            s += arguments[i] + ' ';
        }
        s = s.slice(0, -1);
        if (!window.console) alert(s);
        else
            console.log(s);
    }
    /**
     * .Popup
     * @extends jquery.1.6.2
     * @fileOverview   文本框效果
     * @author 2kid
     * @email 444212235@qq.com
     * @site 2kid.org
     * @version 1.0
     * @date 2011-08-18
     * Copyright (c) 2011-2012 2kid
     * @example
     *   $.Popup();
     */


(function($){

    $.Popup=function(options){

        var opt=$.extend(true,{},$.Popup.settings,options);
        var	popup=new Popup(opt);
            popup.init();

    }
    var Popup=function(options){
        //默认参数
        this.o = options;
        this.className=this.o.className;
        this.style=this.o.style;
        this.pos=this.o.pos;
        this.cont=this.o.cont;
        this.fixed=this.o.fixed;
        this.isShade=this.o.isShade;
        this.close=this.o.close;
        this.bgcolor=this.o.bgcolor;
        this.opat=this.o.opat;
        //初始变量
        this.$Popup = $(this.o.tpl);
        this.$shade=null;
        this.$ie6shade=null;

    }

    Popup.prototype={
        init:function(){
            var _this=this;
            this.$Popup.html(this.cont).css(this.style).addClass(this.className).appendTo('body');
            if(this.fixed){
                 _this.setLocation();
            }else{
                 $(window).bind('scroll resize',function(){
                    _this.setLocation();
                }) ;
            }
            if(this.isShade){
                this._addShade();
            }
            this.$Popup.find(this.close).bind('click',function(){
                _this.remove();
                return false;
            });
        },
        _addShade:function(){
            var pose=this._getPos();
             this.$shade=$('<div></div>').css({
                width:pose.dw,
                height:pose.dh,
                background:this.bgcolor,
                position:'absolute',
                left:0,
                top:0,
                zIndex:100,
                opacity:this.opat
            }).appendTo('body');
            if($.browser.msie&&$.browser.version=='6.0'){
               this.$ie6shade=$('<iframe></iframe>').css({
                width:pose.dw,
                height:pose.dh,
                position:'absolute',
                left:0,
                top:0,
                opacity:0
             }).appendTo('body');
            }


        },
        remove:function(){
          this.$Popup.remove();
          if(this.$shade){
              this.$shade.remove();
          }
          if(this.$ie6shade){
              this.$ie6shade.remove();
          }
        },
        setLocation:function(){
            var _this=this;
            var pose=this._getPos();
            var lefts=0,tops=0;
            var pw=this.$Popup.outerWidth(true),ph=this.$Popup.outerHeight(true);
            if(typeof this.pos=='string'){
                switch(this.pos){
                    case 'leftmiddle':{
                       tops=(pose.wh-ph)/2+pose.wt;
                       lefts=pose.wl;
                        _this.$Popup.animate({left:lefts,top:tops},{duration:650,queue:false});
                        break;
                    }
                    case 'rightbottom':{
                       tops=pose.wh-ph+pose.wt;
                       lefts=pose.ww-pw+pose.wl;
                        _this.$Popup.animate({left:lefts,top:tops},{duration:650,queue:false});
                        break;
                    }
                    case 'rightmiddle':{
                       tops=(pose.wh-ph)/2+pose.wt;
                       lefts=pose.ww-pw+pose.wl;
                       _this.$Popup.animate({left:lefts,top:tops},{duration:650,queue:false});
                        break;

                    }
                    default:{
                        tops=(pose.wh-ph)/2+pose.wt;
                        lefts=(pose.ww-pw)/2+pose.wl;
                        _this.$Popup.animate({left:lefts,top:tops},{duration:650,queue:false});
                        break;

                    }
                }
            }else{
                 _this.$Popup.animate({left:this.pos.left,top:this.pos.top});
            }
        },
        _getPos:function(){
            return {
                ww:$(window).width(),
                dw:Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth),
                wh:$(window).height(),
                dh:Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight),
                wt:$(window).scrollTop(),
                wl:$(window).scrollLeft()
            }
        }

    }


    $.Popup.settings={
          tpl:'<div></div>',
          style:{
              width:200,
              height:100,
              position:'absolute',
              zIndex:101,
              background:'#ccc'
          },
          cont:'',
          className:'',
          pos:'middle',
          fixed:true,
          isShade:false,
          close:'',
          opat:.5,
          bgcolor:'#000'
    }
})(jQuery);
    
$.Popup({
    style:{
        height:123
    },
    cont:'<div>内容啊</div><a class="close" href="">关闭</a>',
    close:'.close',
    isShade:true
});

  

</script>
</body>
</html>


